/* Self-links
   (More non-shared styles in standard.css) */

a.self-link {
  position: absolute;
  top: 0;
  left: -2.5em;
  width: 2em;
  height: 2em;
  text-align: center;
  transition: opacity 0.2s;
  opacity: 0.5;
  text-decoration: none;
}
a.self-link:hover {
  opacity: 1;
  text-decoration: none;
}

h2 > a.self-link, h3 > a.self-link, h4 > a.self-link, h5 > a.self-link, h6 > a.self-link {
  font-size: 83%;
  color: inherit;
  border-bottom: none;
}

a.self-link::before {
  content: "¶";
}

h2 > a.self-link::before, h3 > a.self-link::before, h4 > a.self-link::before,
h5 > a.self-link::before, h6 > a.self-link::before {
  content: "§";
}

@media (max-width: 767px) {
  dd { margin-left: 0; }
  /* Don't position self-link in headings off-screen */
  h2 > a.self-link, h3 > a.self-link, h4 > a.self-link, h5 > a.self-link, h6 > a.self-link { left: auto; top: auto; margin-left: 0.5em; }
}

/* For output from https://github.com/tabatkins/highlighter */

c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */

/* MDN margin annotations; shared among both HTML and Bikeshed specs */
@media (max-width: 767px) { .mdn-anno { opacity: .1 } }
.mdn-anno {
  font: 1em sans-serif;
  padding: 0.3em;
  position: absolute;
  z-index: 8;
  right: 0.3em;
  background: #EEE;
  color: black;
  box-shadow: 0 0 3px #999;
  overflow: hidden;
  border-collapse: initial;
  border-spacing: initial;
  min-width: 9em;
  max-width: min-content;
  white-space: nowrap;
  word-wrap: normal;
  hyphens: none;
}
.mdn-anno:not(.wrapped) {
  opacity: 1;
}
.mdn-anno:hover {
  z-index: 9;
}
.mdn-anno:focus-within {
  z-index: 11;
}
.mdn-anno.wrapped {
  min-width: 0;
}
.mdn-anno.wrapped > :not(button) {
  display: none;
}
.mdn-anno > .mdn-anno-btn {
  cursor: pointer;
  border: none;
  color: #000;
  background: transparent;
  margin: -8px;
  float: right;
  padding: 10px 8px 8px 8px;
  outline: none;
}
.mdn-anno > .mdn-anno-btn > .less-than-two-engines-flag {
  color: red;
  padding-right: 2px;
}
.mdn-anno > .mdn-anno-btn > .all-engines-flag {
  color: green;
  padding-right: 2px;
}
.mdn-anno > .mdn-anno-btn > span {
  color: #fff;
  background-color: #000;
  font-weight: normal;
  font-family: zillaslab,Palatino,"Palatino Linotype",serif;
  padding: 2px 3px 0px 3px;
  line-height: 1.3em;
  vertical-align: top;
}
.mdn-anno > .feature {
  margin-top: 20px;
}
.mdn-anno > .feature:not(:first-of-type) {
  border-top: 1px solid #999;
  margin-top: 6px;
  padding-top: 2px;
}
.mdn-anno > .feature > .less-than-two-engines-text {
  color: red
}
.mdn-anno > .feature > .all-engines-text {
  color: green
}
.mdn-anno > .feature > p {
  font-size: .75em;
  margin-top: 6px;
  margin-bottom: 0;
}
.mdn-anno > .feature > p + p {
  margin-top: 3px;
}
.mdn-anno > .feature > p > a[href] {
  color: #034575;
  text-decoration: none;
  border-bottom: 1px solid #707070;
  padding: 0 1px 0;
  margin: 0 -1px 0;
}
.mdn-anno > .feature > p > a[href]:focus,
.mdn-anno > .feature > p > a[href]:hover {
  background: #f8f8f8;
  background: rgba(75%, 75%, 75%, .25);
  border-bottom-width: 3px;
  margin-bottom: -2px;
}
.mdn-anno > .feature > p > a[href]:active {
  color: #C00;
  border-color: #C00;
}
.mdn-anno > .feature > .support {
  display: block;
  font-size: 0.6em;
  margin: 0;
  padding: 0;
  margin-top: 2px
}
.mdn-anno > .feature > .support + div {
  padding-top: 0.5em;
}
.mdn-anno > .feature > .support > hr {
  display: block;
  border: none;
  border-top: 1px dotted #999;
  padding: 3px 0px 0px 0px;
  margin: 2px 3px 0px 3px;
}
.mdn-anno > .feature > .support > hr::before {
  content: "";
}
.mdn-anno > .feature > .support > span {
  padding: 0.2em;
  display: block;
  display: table;
}
.mdn-anno > .feature > .support > span.no,
.mdn-anno > .feature > .support > span.unknown {
  color: #CCCCCC;
  filter: grayscale(100%);
}
.mdn-anno > .feature > .support > span.no::before,
.mdn-anno > .feature > .support > span.unknown::before {
  opacity: 0.5;
}
.mdn-anno > .feature > .support > span:not(.caniuse):hover {
  color: white;
  filter: none;
  background: #666;
}
.mdn-anno > .feature > .support > span:first-of-type {
  margin-top: 0.5em;
}
.mdn-anno > .feature > .support > span > span {
  padding: 1px 0.5em 0 0.5em;
  display: table-cell;
}
.mdn-anno > .feature > .support > span > span:first-child {
  width: 100%;
}
.mdn-anno > .feature > .support > span > span:last-child {
  width: 100%;
  white-space: pre;
  padding: 0;
}
.mdn-anno > .feature > .support > span::before {
  content: ' ';
  display: table-cell;
  min-width: 1.5em;
  height: 1.5em;
  background: no-repeat center center;
  background-size: contain;
  text-align: right;
  font-size: 0.75em;
  font-weight: bold;
}
.mdn-anno > .feature > .support > .chrome_android::before {
  background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg);
}
.mdn-anno > .feature > .support > .firefox_android::before {
  background-image: url(https://resources.whatwg.org/browser-logos/firefox.png);
}
.mdn-anno > .feature > .support > .chrome::before {
  background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg);
}
.mdn-anno > .feature > .support > .edge_blink::before {
  background-image: url(https://resources.whatwg.org/browser-logos/edge.svg);
}
.mdn-anno > .feature > .support > .edge::before {
  background-image: url(https://resources.whatwg.org/browser-logos/edge_legacy.svg);
}
.mdn-anno > .feature > .support > .firefox::before {
  background-image: url(https://resources.whatwg.org/browser-logos/firefox.png);
}
.mdn-anno > .feature > .support > .ie::before {
  background-image: url(https://resources.whatwg.org/browser-logos/ie.png);
}
.mdn-anno > .feature > .support > .safari_ios::before {
  background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg);
}
.mdn-anno > .feature > .support > .nodejs::before {
  background-image: url(https://nodejs.org/static/images/favicons/favicon.ico);
}
.mdn-anno > .feature > .support > .opera_android::before {
  background-image: url(https://resources.whatwg.org/browser-logos/opera.svg);
}
.mdn-anno > .feature > .support > .opera::before {
  background-image: url(https://resources.whatwg.org/browser-logos/opera.svg);
}
.mdn-anno > .feature > .support > .safari::before {
  background-image: url(https://resources.whatwg.org/browser-logos/safari.png);
}
.mdn-anno > .feature > .support > .samsunginternet_android::before {
  background-image: url(https://resources.whatwg.org/browser-logos/samsung.svg);
}
.mdn-anno > .feature > .support > .webview_android::before {
  background-image: url(https://resources.whatwg.org/browser-logos/android-webview.png);
}
.mdn-anno > .feature > .support > .caniuse::before {
  background-image: url(https://caniuse.com/img/favicon-128.png);
}
.mdn-anno > .feature > .support > .caniuse > span,
.mdn-anno > .feature > .support > .caniuse > span:hover,
.mdn-anno > .feature > .support > .caniuse > span:last-child {
  padding-left: 4px;
  font-size: 11px
}
.mdn-anno > .feature > .support > .caniuse > span > a[href] {
  color: #034575;
  text-decoration: none;
  border-bottom: 1px solid #707070;
  padding: 0 1px 0;
  margin: 0 -1px 0;
}
.mdn-anno > .feature > .support > .caniuse > span > a[href]:focus,
.mdn-anno > .feature > .support > .caniuse > span > a[href]:hover {
  background: #f8f8f8;
  background: rgba(75%, 75%, 75%, .25);
  border-bottom-width: 3px;
  margin-bottom: -2px;
}
.mdn-anno > .feature > .support > .caniuse > span > a[href]:active {
  color: #C00;
  border-color: #C00;
}
.name-slug-mismatch {
  color: red;
}
/* We need this margin adjustment for MDN annos in the HTML spec, but we
 * don’t want it for Bikeshed-generated (<body class="h-entry">) specs. */
:not(.h-entry) p + .mdn-anno { margin-top: -45px; }
.mdn-anno.before { margin-top: 2px; }
td > .mdn-anno.before, dt > .mdn-anno.before { margin-top: -26px; }
h2 + .mdn-anno { margin: -48px 0 0 0; }
h3 + .mdn-anno { margin: -46px 0 0 0; }
h4 + .mdn-anno { margin: -42px 0 0 0; }
h5 + .mdn-anno { margin: -40px 0 0 0; }
h6 + .mdn-anno { margin: -40px 0 0 0; }
/* .domintro, .note, .warning, and .example are "position: relative", so
 * to put anno at right margin, must move to right of containing block */
.domintro .mdn-anno,
.note .mdn-anno,
.warning .mdn-anno,
.example .mdn-anno {
  right: -9.7em;
}

/* MDN margin annotations (pre-Bikeshed) */

.mdn {
  display: block;
  font: 12px sans-serif;
  position: absolute;
  z-index: 9;
  right: 4px;
  background-color: #eee;
  margin: -26px 0 0 0;
  padding: 7px 5px 5px 6px;
  min-width: 140px;
  box-shadow: 0 0 3px #999;
}
.mdn input {
   cursor: pointer;
   position: absolute;
   left: 0;
   top: -2px;
   height: 1em;
   border: none;
   color: #000;
   background: transparent;
   margin-left: -8px;
   font-size: 10px;
   line-height: 1em;
}
.mdn b {
  color: #fff;
  background-color: #000;
  font-weight: normal;
  font-family: zillaslab,Palatino,"Palatino Linotype",serif;
  padding: 2px 3px 0px 3px;
  line-height: 1.3em;
  vertical-align: top;
}
.mdn details {
  display: inline;
  margin-top: 1px;
}
.mdn summary a {
  margin-left: -4px;
}
.nosupportdata {
  font-style: italic;
  margin-top: 4px;
  margin-left: 8px;
  padding-bottom: 8px;
}
.mdnsupport {
  display: table;
  margin-top: 4px;
  margin-bottom: 6px;
}
.mdnsupport > span {
  display: table-row;
  padding: 0.2em 0;
  padding-top: 0.2em;
  font-size: 9.6px;
}
.mdnsupport > span > span {
  display: table-cell;
  padding: 0 0.5em;
  vertical-align: top;
  line-height: 1.5em;
}
.mdnsupport > span > span:last-child {
  text-align: right;
  padding: 0;
}
.mdnsupport > span.no {
  color: #CCCCCC;
  filter: grayscale(100%);
}
.mdnsupport > span.unknown {
  color: #CCCCCC;
  filter: grayscale(100%);
}
.mdnsupport > span.no::before {
  opacity:  0.5;
}
.mdnsupport > span.unknown::before {
  opacity:  0.5;
}
.mdnsupport > span::before {
  content: "";
  display: table-cell;
  min-width: 1.5em;
  height: 1.5em;
  background: no-repeat center center;
  background-image: none;
  background-size: auto auto;
  background-size: contain;
  text-align: right;
  font-size: 0.75em;
  font-weight: bold;
}
.mdnsupport > .chrome::before, .mdnsupport > .chrome_android::before {
  background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg);
}
.mdnsupport > .edge::before, .mdnsupport > .edge_mobile::before {
  background-image: url(https://resources.whatwg.org/browser-logos/edge.svg);
}
.mdnsupport > .edge_legacy::before {
  background-image: url(https://resources.whatwg.org/browser-logos/edge_legacy.svg);
}
.mdnsupport > .firefox::before, .mdnsupport > .firefox_android::before {
  background-image: url(https://resources.whatwg.org/browser-logos/firefox.png);
}
.mdnsupport > .ie::before {
  background-image: url(https://resources.whatwg.org/browser-logos/ie.png);
}
.mdnsupport > .opera::before, .mdnsupport > .opera_android::before {
  background-image: url(https://resources.whatwg.org/browser-logos/opera.svg);
}
.mdnsupport > .safari::before {
  background-image: url(https://resources.whatwg.org/browser-logos/safari.png);
}
.mdnsupport > .safari_ios::before {
  background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg);
}
.mdnsupport > .samsunginternet_android::before {
  background-image: url(https://resources.whatwg.org/browser-logos/samsung.svg);
}
.mdnsupport > .webview_android::before {
  background-image: url(https://resources.whatwg.org/browser-logos/android-webview.png);
}

 p + .mdn { margin-top: -45px; }
.mdn.before { margin-top: 2px; }
 h2 + .mdn { margin: -48px 0 0 0; }
 h3 + .mdn { margin: -46px 0 0 0; }
 h4 + .mdn { margin: -42px 0 0 0; }
 h5 + .mdn { margin: -40px 0 0 0; }
 h6 + .mdn { margin: -40px 0 0 0; }

.mdn > div { margin: 0; padding-bottom: 1px; }
.mdn > div > .less-than-two-engines-flag { color: red; background-color: #eee; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; }
.mdn > div > .all-engines-flag { color: green; background-color: #eee; }
.mdn > div > details > .less-than-two-engines-text { color: red; font-weight: bold; margin-top: 0; padding-bottom: 12px; }
.mdn > div > details > .all-engines-text { color: green; font-weight: bold; margin-top: 0; padding-bottom: 12px; }
.mdn > div:last-of-type details > .all-engines-text, .mdn > div:last-of-type > details > .less-than-two-engines-text { padding-bottom: 0; margin-bottom: 0; }
.mdn :link { color: #0000EE; }
.mdn :visited { color: #551A8B; }
.mdn :link:active, :visited:active { color: #FF0000; }
.mdn :link, :visited {
   text-decoration: underline;
   cursor: pointer;
}
.mdn.wrapped { min-width: 0px; }
.mdn.wrapped details { display: none; }
.mdn:hover { z-index: 11; }
.mdn:focus-within { z-index: 11; }

/* DOM tree borders
   (standard.css has more styles for DOM trees that are not shared) */

ul.domTree, ul.domTree ul {
  padding: 0 0 0 1em;
  margin: 0;
}

ul.domTree li {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

ul.domTree li li {
  list-style: none;
}

ul.domTree li:first-child::before {
  position: absolute;
  top: 0;
  height: 0.6em;
  left: -0.75em;
  width: 0.5em;
  border-style: none none solid solid;
  content: '';
  border-width: 0.1em;
}

ul.domTree li:not(:last-child)::after {
  position: absolute;
  top: 0;
  bottom: -0.6em;
  left: -0.75em;
  width: 0.5em;
  border-style: none none solid solid;
  content: '';
  border-width: 0.1em;
}
